<template>
  <div>
    <el-dialog
      title="产品批量上传队列"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      class="mt-dialog"
      :fullscreen="true"
      :lock-scroll="true"
      @close="close"
    >
      <el-tabs v-model="activeName" tab-position="top">
        <el-tab-pane label="详情列表" name="first">
          <div class="top">
            <el-select
              v-model="select_web"
              style="width: auto;"
              filterable
              clearable
              remote
              value-key="label"
              reserve-keyword
              placeholder="输入域名搜索网站"
              :remote-method="remoteSearchWebsite"
              :loading="remoteSearchWebsite_loading"
            >
              <el-option
                v-for="(item,index) in website_options"
                :key="index"
                :label="item.domain"
                :value="item.id"
              />
            </el-select>
            <el-select v-model="is_finished" placeholder="完成" clearable>
              <el-option label="所有" value="" />
              <el-option label="已经完成" value="true" />
              <el-option label="没有完成" value="false" />
            </el-select>
            <el-input
              v-model="kwInput"
              placeholder="输入 任意字符 进行筛选"
              class="input-with-select"
              clearable
              @keyup.native.enter="handleSearch"
            >
              <el-button slot="append" icon="el-icon-search" @click="handleSearch">搜索</el-button>
            </el-input>
            <el-button v-if="pks.length > 0" type="warning" @click="handleDeleteSelectedPsProduct()">删除选择产品</el-button>
            <el-button v-if="select_web !== ''" type="danger" @click="handleDeleteAllPsProduct()">删除所有产品</el-button>
          </div>

          <el-table
            ref="multipleTable"
            v-loading.lock="listLoading"
            :data="data"
            border
            fit
            highlight-current-row
            style="width: 100%"
            @selection-change="handleSelectionChange"
            @sort-change="handleSort"
          >
            <el-table-column
              type="selection"
              width="55"
            />
            <el-table-column
              fixed
              prop="image"
              width="120"
              label="产品"
            >
              <template slot-scope="scope">
                <img :src="scope.row.image" width="90">
              </template>
            </el-table-column>
            <el-table-column align="center" label="网址" prop="website__domain" sortable="custom" />
            <el-table-column align="center" label="任务ID" prop="id" sortable="custom" />
            <el-table-column align="center" label="任务下发次数" prop="try_times" sortable="custom" />
            <el-table-column align="center" label="keyword" prop="keyword" sortable="custom" />
            <el-table-column align="center" prop="is_finished" label="完成" sortable="custom">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.is_finished"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                />
              </template>
            </el-table-column>
            <el-table-column align="center" prop="is_success" label="成败" sortable="custom">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.is_success"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                />
              </template>
            </el-table-column>
            <el-table-column align="center" label="上传结果" prop="item_id" sortable="custom">
              <template slot-scope="scope">
                <span style="display: block">PID:<a :href="scope.row.target_url">{{ scope.row.ps_product }}</a></span>
                <span style="display: block">price:{{ scope.row.target_price }}</span>
                <span style="display: block">msg:{{ scope.row.msg }}</span>
                <el-button size="mini" type="text" @click="handleDeletePsProduct(scope.row.id)">删除产品</el-button>
              </template>
            </el-table-column>
            <el-table-column align="center" label="创建时间" prop="update_at" sortable="custom" />
            <el-table-column align="center" label="操作" width="200">
              <template slot-scope="scope">
                <el-button size="mini" type="success" @click="handleAction('resend', scope.row)">重发命令</el-button>
                <el-button size="mini" type="danger" @click="handleAction('delete', scope.row)">删除任务</el-button>
              </template>
            </el-table-column>

          </el-table>

          <el-pagination
            v-if="data.length"
            background
            class="mt-pagination"
            :current-page="page"
            :page-sizes="[10,20,50,100]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handlePageChange"
          />
          <el-button size="mini" type="success" @click="handleAction('resendall', '')">重传所有</el-button>

        </el-tab-pane>
        <el-tab-pane label="统计信息" name="second">
          <div class="top" style="margin-top: 5px">
            <div style="float: right;margin-bottom: 5px">
              <el-select v-model="select_project" placeholder="选择项目" clearable style="width: 330px;margin-right: 10px">
                <el-option v-for="item in this.projects" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
              <el-select
                v-model="upload_state"
                style="width: 330px;margin-right: 10px"
                clearable
                placeholder="状态"
              >
                <el-option
                  v-for="item in uploadStateOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <el-input
                v-model="skw"
                placeholder="输入域名直接查询"
                class="input-with-select"
                clearable
                @keyup.native.enter="getStatistics"
              >
                <el-button slot="append" icon="el-icon-search" @click="getStatistics">搜索</el-button>
              </el-input>
            </div>
          </div>
          <el-table
            v-loading.lock="statick_listLoading"
            :data="statistics_data"
            border
            fit
            highlight-current-row
            style="width: 100%"
            @sort-change="handleStaticSort"
          >

            <el-table-column align="center" label="网站" prop="website__domain" sortable="custom">
              <template slot-scope="scope">
                <el-button type="text" @click="handleGetServerInfo(scope.row.domain)">
                  {{ scope.row.domain + '|' + scope.row.tag }}
                </el-button>
                <!--<el-button plain icon="el-icon-info"-->
                <!--size="mini" @click="handleGetServerInfo(scope.row.domain)"></el-button>-->
              </template>
            </el-table-column>
            <el-table-column align="center" width="180" label="总数" prop="total" sortable="custom">
              <template slot-scope="scope">
                {{ scope.row.success }}/{{ scope.row.total }}
                <el-progress
                  v-if="scope.row.percentage < 100"
                  :percentage="scope.row.percentage"
                  status="exception"
                />
                <el-progress v-else :percentage="100" status="success" />
              </template>
            </el-table-column>
            <el-table-column align="center" width="80" label="失败" prop="failed" />
            <el-table-column align="center" width="80" label="等待" prop="waiting" sortable="custom" />
            <el-table-column align="center" width="90" label="Hourly" prop="one_hour_upload" />
            <el-table-column align="center" width="160" label="预计" prop="one_hour_upload">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.one_hour_upload > 0" type="danger" size="mini">
                  {{ (scope.row.waiting / scope.row.one_hour_upload).toFixed(1) }}小时
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column align="center" width="180" label="price_up" prop="price_increace" sortable="custom">
              <template slot-scope="scope">
                <button type="button" size="mini" @click="handleModifyWebSiteParams(scope.row)">
                  {{ scope.row.price_increace }}%
                </button>
                min:{{ scope.row.price_min }}
              </template>
            </el-table-column>
            <el-table-column align="center" width="140" label="队列状态" prop="task_status" sortable="custom">
              <template slot-scope="scope">
                <el-dropdown size="mini" split-button :type="options[scope.row.state-1].type">
                  {{ options[scope.row.state - 1].label }}
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                      v-if="scope.row.task_status != 1"
                      @click.native.stop="handleChangeTaskState(scope.row.domain,1)"
                    >开始运行
                    </el-dropdown-item>
                    <el-dropdown-item
                      v-if="scope.row.task_status != 2"
                      @click.native.stop="handleChangeTaskState(scope.row.domain,2)"
                    >结束运行
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
            <el-table-column align="center" width="100" label="启动时间" prop="start_at" />
            <el-table-column align="center" width="100" label="自动数量" prop="auto_upload_daily_max">
              <template slot-scope="scope">
                <el-button type="text" size="mini" @click="handleShowModifyAutoControl(scope.row)">
                  {{ scope.row.auto_upload_daily_max }}
                </el-button>
              </template>
            </el-table-column>
            <el-table-column align="center" width="100" label="enable" sortable="custom">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.enable"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  @change="handleTaskEnable(scope.row.domain)"
                />
              </template>
            </el-table-column>
            <el-table-column align="center" width="100" label="转存数据" sortable="custom">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.enable_tablestore"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                />
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="200">
              <template slot-scope="scope">
                <el-button size="mini" type="danger" @click="handleDeleteAll(scope.row)">清空上传</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            v-if="statistics_data.length"
            background
            class="mt-pagination"
            :current-page="s_page"
            :page-sizes="[10,20,50,100]"
            :page-size="s_pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="s_total"
            @size-change="handleStaticPageSizeChange"
            @current-change="handleStaticPageChange"
          />
        </el-tab-pane>
      </el-tabs>
      <el-dialog
        append-to-body
        :title="website_dialog_title"
        :visible.sync="website_innerDialogVisible"
        :close-on-click-modal="false"
      >
        <el-form label-position="top" label-width="80px" :model="websiteParamsFrom">
          <el-form-item label="价格增长百分比">
            <el-input v-model="websiteParamsFrom.price_increace" type="number" />
          </el-form-item>
          <el-form-item label="最低价格数值">
            <el-input v-model="websiteParamsFrom.price_min" type="number" />
          </el-form-item>
          <el-form-item>
            <el-select v-model="websiteParamsFrom.upload_state" size="mini" placeholder="当前状态">
              <el-option
                v-for="item in uploadStateOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-switch
              v-model="websiteParamsFrom.enable_tablestore"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="website_innerDialogVisible = false">取 消</el-button>
          <el-button type="danger" @click="actionModifyWebsiteParmas">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog
        append-to-body
        :title="title"
        :width="width"
        :visible.sync="innerDialogVisible"
        :close-on-click-modal="false"
      >
        <span slot="footer" class="dialog-footer">
          <el-button @click="innerDialogVisible = false">取 消</el-button>
          <el-button :type="action !== 'delete'?'primary':'danger'" @click="confirm">确 定</el-button>
        </span>
      </el-dialog>
    </el-dialog>
    <el-dialog
      append-to-body
      title="修改控制参数"
      :visible.sync="autoControlDialogVisible"
      :close-on-click-modal="false"
    >
      <el-form :model="autoControlForm" label-position="left" label-width="160px">

        <el-form-item v-if="action !== 'delete'" label="每日最多上传">
          <el-input v-model="autoControlForm.auto_upload_daily_max" />
        </el-form-item>
        <el-form-item v-if="action !== 'delete'" label="开始时间">
          <el-input v-model="autoControlForm.auto_begin_at" />
        </el-form-item>
        <el-form-item v-if="action !== 'delete'" label="结束时间">
          <el-input v-model="autoControlForm.auto_end_at" />
        </el-form-item>
        <el-form-item v-if="action !== 'delete'" label="网站">
          <el-input v-model="autoControlForm.domain" disabled />
        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="autoControlDialogVisible = false">取 消</el-button>
        <el-button :type="action !== 'delete'?'primary':'danger'" @click="DoAutoControlUpdate">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  Get,
  Delete,
  ReSend,
  ReSendMulti,
  Statistics,
  ChangeTaskState,
  ChangeTaskEnable,
  AutoControlUpdate,
  GetServerInfo,
  ModifyWebsiteParam
} from '@/api/erp/directlyuploadtask'
import { Get as GetProjects } from '@/api/erp/elicink/project'
import qs from 'qs'
import { Get as GetWebsite } from '@/api/erp/elicink/website'
import { Post as DeletePsProduct } from '@/api/erp/crawl/psproductsdeletetask'
import Cookies from 'js-cookie'

const orderMapper = {
  'ascending': 0,
  'descending': 1,
  'null': ''
}
export default {
  name: 'Directlyuploadtask',
  props: ['taskVisible', 'domain'],
  data() {
    return {
      autoControlForm: {
        domain: '',
        auto_upload_daily_max: 500,
        auto_begin_at: '14:00',
        auto_end_at: ''
      },
      autoControlDialogVisible: false,
      remoteSearchWebsite_loading: false,
      select_web: '',
      website_options: [],
      pks: [],
      projects: [],
      select_project: '',
      uploadStateOptions: [
        {
          label: '所有',
          value: ''
        },
        {
          label: '正在上传',
          value: 1
        },
        {
          label: '已经停止',
          value: 2
        }
      ],
      website_dialog_title: '修改网站参数',
      website_innerDialogVisible: false,
      data: [],
      statick_listLoading: false,
      listLoading: false,
      kwInput: '',
      is_finished: '',
      order_by: '',
      order_desc: '',
      // pagination
      pagesize: 10,
      page: 1,
      total: 0,
      activeName: 'second',
      action: null,
      dialogVisible: false,
      title: '',
      temp: {
        name: '',
        url: ''
      },
      upload_state: 1,
      websiteParamsFrom: {
        price_increace: 0,
        price_min: 10,
        domain: '',
        enable_tablestore: '',
        upload_state: 'new'
      },
      width: '',
      statistics_data: [],
      // pagination
      s_pagesize: 10,
      s_page: 1,
      s_total: 0,
      skw: '',
      s_order_by: '',
      s_order_desc: '',
      innerDialogVisible: false,
      options: [
        {
          value: 1,
          type: 'danger',
          label: '正在运行'
        },
        {
          value: 2,
          type: 'success',
          label: '已经停止'
        },
        {
          value: 3,
          type: 'warning',
          label: '运行错误'
        },
        {
          value: 4,
          type: 'primary',
          label: '未开始'
        }
      ]
    }
  },
  watch: {
    domain(v) {
      this.skw = v
    },
    taskVisible(v) {
      this.dialogVisible = v
    }
  },
  created() {
    this.select_project = parseInt(Cookies.get('directlyuploadtask_projectid')) || ''
    this.handleFetchProjects()
  },
  methods: {
    handleDeleteAllPsProduct() {
      DeletePsProduct({ 'website_id': this.select_web, 'delete_all': '1' }).then(response => {
        this.notify('删除成功')
      }).catch(err => {
        console.log(err)
      })
    },
    handleDeleteSelectedPsProduct() {
      DeletePsProduct({ 'website_id': this.select_web, 'tasks': this.pks }).then(response => {
        this.notify('删除成功，等待队列完成')
      }).catch(err => {
        console.log(err)
      })
    },
    handleDeletePsProduct(task_id) {
      DeletePsProduct({ 'website_id': this.select_web, 'tasks': [task_id] }).then(response => {
        this.notify('添加成功，等待队列完成')
      }).catch(err => {
        console.log(err)
      })
    },
    remoteSearchWebsite(query) {
      if (query !== '') {
        this.remoteSearchWebsite_loading = true
        GetWebsite(null, qs.stringify({
          kw: query,
          pagesize: 5,
          page: 1
        })).then(response => {
          const id_list = this.website_options.map(item => {
            return item.id
          })
          for (let i = 0; i < response.data.data.length; i++) {
            if (id_list.indexOf(response.data.data[i].id) === -1) {
              this.website_options.push(response.data.data[i])
            }
          }
          this.remoteSearchWebsite_loading = false
        })
      } else {
        this.remoteSearchWebsite_loading = false
      }
    },
    handleChangeUploadState(row) {
      this.websiteParamsFrom.price_increace = row.price_increace
      this.websiteParamsFrom.price_min = row.price_min
      this.websiteParamsFrom.domain = row.domain
      this.websiteParamsFrom.upload_state = row.upload_state
      this.ModifyWebsiteParam(this.websiteParamsFrom).then(response => {
        this.notify('修改成功')
      }).catch(err => {
        console.log(err)
      })
    },
    handleModifyWebSiteParams(row) {
      this.websiteParamsFrom.price_increace = row.price_increace
      this.websiteParamsFrom.price_min = row.price_min
      this.websiteParamsFrom.domain = row.domain
      this.websiteParamsFrom.upload_state = row.upload_state
      this.websiteParamsFrom.enable_tablestore = row.enable_tablestore
      this.website_dialog_title = '修改网站' + row.domain + '参数'
      this.website_innerDialogVisible = true
    },
    actionModifyWebsiteParmas() {
      ModifyWebsiteParam(this.websiteParamsFrom).then(response => {
        this.getStatistics()
        this.website_innerDialogVisible = false
      }).catch(err => {
        console.log(err)
      })
    },
    handleTabClick(tab, event) {
      if (tab.name === 'second') {
        this.getStatistics()
      } else {
        this.getList()
      }
    },
    resetTemp() {
      this.temp = {
        name: '',
        url: ''
      }
    },
    handleChangeTaskState(domain, state) {
      ChangeTaskState({ domain: domain, state: state }).then(response => {
        this.getStatistics()
      }).catch(err => {
        console.log(err)
      })
    },
    handleGetServerInfo(domain) {
      this.listLoading = true
      GetServerInfo({ domain: domain }).then(response => {
        this.listLoading = false
        this.$alert(response.data, '上传历史', {
          dangerouslyUseHTMLString: true,
          customClass: 'mt-alert'
        })
      }).catch(err => {
        console.log(err)
        this.listLoading = false
      })
    },
    handleTaskEnable(domain) {
      this.$confirm('是否确定切换状态, 在下一个循环周期将会生效?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        ChangeTaskEnable({ domain: domain }).then(response => {
          this.getStatistics()
        }).catch(err => {
          console.log(err)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleShowModifyAutoControl(row) {
      this.autoControlForm.domain = row.domain
      this.autoControlForm.auto_begin_at = row.auto_begin_at
      this.autoControlForm.auto_end_at = row.auto_end_at
      this.autoControlForm.auto_upload_daily_max = row.auto_upload_daily_max
      this.autoControlDialogVisible = true
    },
    DoAutoControlUpdate() {
      this.$confirm('是否确定切换状态, 在下一个循环周期将会生效?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        AutoControlUpdate(this.autoControlForm).then(response => {
          this.getStatistics()
        }).catch(err => {
          console.log(err)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    getStatistics() {
      this.statick_listLoading = true
      Statistics(null, qs.stringify({
        pagesize: this.s_pagesize,
        page: this.s_page,
        kw: this.skw,
        project_id: this.select_project,
        upload_state: this.upload_state,
        order_by: this.s_order_by,
        order_desc: this.s_order_desc
      })).then(response => {
        this.scrollTop()
        this.statistics_data = response.data.data
        this.s_total = response.data.total
        this.statick_listLoading = false
        Cookies.set('directlyuploadtask_projectid', this.select_project)
      }).catch(err => {
        console.log(err)
        this.statick_listLoading = false
      })
    },
    getList() {
      this.listLoading = true
      Get(null, qs.stringify({
        kw: this.kwInput,
        is_finished: this.is_finished,
        website_id: this.select_web,
        pagesize: this.pagesize,
        page: this.page,
        order_by: this.order_by,
        order_desc: this.order_desc
      }))
        .then(response => {
          this.scrollTop()
          this.data = response.data.data
          this.listLoading = false
          this.total = response.data.total
        }).catch(err => {
          console.log(err)
          this.listLoading = false
        })
    },
    handleSendTask(row) {

    },
    handleDeleteAll(row) {
      this.$confirm(`确定清除所有上传记录吗`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        Delete(null, { website_id: row.id }).then((response) => {
          this.innerDialogVisible = false
          this.getList()
          this.$emit('reload')
          this.notify('删除成功')
        }).catch(e => {
          this.innerDialogVisible = false
        })
      }).catch(() => {
      })
    },
    handleAction(action, row) {
      this.action = action
      switch (action) {
        case 'delete':
          this.width = '30%'
          this.title = `确认要删除${row.domain}?`
          this.temp = row
          this.innerDialogVisible = true
          break
        case 'resend':
          this.width = '50%'
          this.title = `确定要重新上传产品:${row.item_id}`
          this.temp = Object.assign({}, row)
          this.innerDialogVisible = true
          break
        case 'resendall':
          this.width = '50%'
          this.title = `确定要重新上传所有?`
          this.innerDialogVisible = true
      }
    },
    confirm() {
      const _data = this.temp
      switch (this.action) {
        // case 'create':
        //   Post({
        //     url: _data.url,
        //     opitons: _data.opitons
        //   }).then(response => {
        //     this.innerDialogVisible = false
        //     this.getList()
        //     this.$emit('reload')
        //     this.notify('添加成功')
        //   })
        //   break
        case 'delete':
          Delete(_data.id).then((response) => {
            this.innerDialogVisible = false
            this.getList()
            this.$emit('reload')
            this.notify('删除成功')
          }).catch(e => {
            this.innerDialogVisible = false
          })
          break
        case 'resend':
          ReSend(_data.id).then((response) => {
            this.innerDialogVisible = false
            this.getList()
            this.$emit('reload')
            this.notify('命令发送成功')
          }).catch(e => {
            this.innerDialogVisible = false
          })
          break
        case 'resendall':
          if (this.pks.length <= 0) {
            this.notify('请先选择产品')
            return
          }
          ReSendMulti({ pks: this.pks }).then((response) => {
            this.innerDialogVisible = false
            this.getList()
            this.$emit('reload')
            this.notify('修改成功，等待执行周期完成执行')
          }).catch(e => {
            this.innerDialogVisible = false
          })
          break
        // case 'edit':
        //   Put(_data.id, {
        //     url: _data.url,
        //     opitons: _data.opitons
        //   }).then((response) => {
        //     this.innerDialogVisible = false
        //     this.$emit('reload')
        //     this.getList()
        //     this.notify('更新成功')
        //   });
        //   break
      }
    },
    notify(message, duration) {
      this.$notify({
        title: '成功',
        message: message,
        type: 'success',
        duration: duration || 2000
      })
    },
    handleStaticPageSizeChange(val) {
      this.s_pagesize = val
    },
    handleStaticSort(v) {
      this.s_order_by = v.prop
      this.s_order_desc = orderMapper[v.order]
    },
    handleStaticPageChange(val) {
      this.s_page = val
      this.getStatistics()
    },
    // pageSize 改变后触发 table 更新
    handleSizeChange(val) {
      this.pagesize = val
    },
    // page 改变后触发 table 更新
    handlePageChange(val) {
      this.page = val
      this.getList()
    },
    // 点击搜索
    handleSearch() {
      this.page = 1
      this.getList()
    },
    handleSelectionChange(val) {
      this.pks = val.map(m => m.id)
    },
    handleSort(v) {
      this.order_by = v.prop
      this.order_desc = orderMapper[v.order]
      this.getList()
    },
    scrollTop() {
      window.scrollTo(0, 0)
    },
    close() {
      this.$emit('closeCrawlTaskDialog', false)
    },
    handleFetchProjects() {
      GetProjects()
        .then(response => {
          this.projects = response.data.data
        })
        .catch(e => {
          console.log('error')
        })
    }
  }
}
</script>

<style scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}

.top >>> .el-input {
  width: 350px;
}

.top >>> .input-with-select .el-input-group__prepend {
  background-color: #fff;
}

.top {
  padding-left: 20px;
  margin-bottom: 5px;
  margin-top: 28px;
}

.input-with-select {
  width: calc(100% - 200px);
}

.add-btn {
  float: right;
  margin-right: 20px;
  width: 150px
}

.mt-pagination {
  float: right;
  margin-top: 5px;
}

.app-container >>> .el-dialog {
  margin-top: 48px !important;
  margin-bottom: 5px;
}

.mt-dialog >>> .el-transfer-panel {
  width: calc(50% - 60px);
}

.mt-form >>> .el-select {
  width: 100%;
}

.mt-form >>> .el-input__inner {
  width: 100%;
}

.mt-dialog >>> .el-dialog {
  margin: 10px auto !important;
}

.mt-dialog >>> .el-dialog__body {
  padding-bottom: 20px;
  padding-top: 5px;
}

.top >>> .el-select {
  width: 100px;
}
</style>

